import { lazy, Suspense } from "react"
import { createBrowserRouter } from "react-router-dom"
import { AuthRoute } from "@/components/AuthRoute"

// 1.lazy函数对数组进行导入
const Login = lazy(() => import("@/pages/Login"))
const GeekLayout = lazy(() => import("@/pages/Layout"))
const Article = lazy(() => import("@/pages/Article"))
const Home = lazy(() => import("@/pages/Home"))
const Publish = lazy(() => import("@/pages/Publish"))

// 2.Suspense组件包裹lazy函数，fallback属性指定加载中的内容，目的是为了优化首次打开的事件
const router = createBrowserRouter([
    {
        path: "/",
        element: <AuthRoute><GeekLayout /></AuthRoute>,
        children: [
            {
                index: true,
                element: <Suspense fallback={"加载中。。。"}><Home /></Suspense>
            },
            {
                path: "article",
                element: <Suspense fallback={"加载中。。。"}><Article /></Suspense>
            },
            {
                path: "publish",
                element: <Suspense fallback={"加载中。。。"}><Publish /></Suspense>
            }

        ]
    },
    {
        path: "/login",
        element: <Login />
    },
    {
        path: "/404",
        element: <div>404</div>
    }

])

export default router